<template>
  <div class="membership">
    <ProTable
      :data-callback="dataCallback"
      :isTable="false"
      ref="ProTableRef"
      :initParam="initParam"
      :requestApi="getTableList"
    >
      <template #tableHeader="_scope">
        <div class="'btn'">
          <el-button
            type="primary"
            :icon="CirclePlus"
            @click="openDialog('新增')"
          >
            新增
          </el-button>
        </div>
      </template>

      <template #tableContent="_scope">
        <div class="membershipPro">
          <div
            class="proItem"
            v-for="(item, _index) in membershipList"
            :key="item.product_id"
          >
            <div class="itemTop">
              <div class="image">
                <img src="../../../assets/images/buy.svg" alt="" />
              </div>
              <div class="text">
                <div class="tit">
                  <span>{{ item.product_name }}</span>
                  <div class="onLine" v-if="item.is_publish">上线</div>
                </div>

                <div class="detal">后端没有返回描述...</div>
              </div>
            </div>
            <div class="itemBtn">
              <el-button type="primary" size="small">修改</el-button>
              <el-button type="danger" size="small" @click="del(item)"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </template>
    </ProTable>
  </div>
</template>

<script lang="ts" setup name="Membership">
import { onMounted, ref } from "vue";
import { deleteMedicineApi, getMembershipListApi } from "@/api/modules";
import ProTable from "@/components/ProTable/index.vue";
import { CirclePlus } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";

const ProTableRef = ref();
onMounted(() => {
  // getMembershipList();
  // console.log('111',ProTableRef.value.tableDate);
});
const membershipList: any = ref([]);

const initParam = { search: "" };
const getTableList = (_params: any) => {
  const param = {
    is_publish: true,
    product_type: 0,
  };
  return getMembershipListApi(param);
};

// 获取数据的回调
const dataCallback = (data: any) => {
  membershipList.value = data;
};

const del = async (item: any) => {
  await useHandleData(
    deleteMedicineApi,
    item._id,
    `删除【${item.product_name}】产品`
  );
};

const openDialog = (tyep: string) => {
  console.log("1", tyep);
};
</script>

<style lang="scss" scoped>
@import "./membership.scss";
</style>
